<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // let fun1=function(){}//普遍的函数声明
        // let fun2=()=>{}//箭头的函数声明 lambda
        // let fun3=(x)=>{return x+1} 
        // let fun4=x=>{return x+1}  //参数列表中有且仅有一个参数，（）可以省略不写
        // let fun5=x=>console.log(x); //如果方法体中只有一行代码{}可以不写
        // let fun6=x=>x+1 //方法体中有且仅有一行代码，这行代码是return返回结果的代码，那么{}和return都可以省略不写


        // //箭头函数没有自己的this
        // //箭头函数中的this是外层上下文环境中的this
        // let person={
        //     name:'张三',
        //     showname:function(){
        //         console.log(this.name);
        //     },
        //     viewname:()=>{
        //         console.log(this.name);
        //     }
        // }
        // person.showname()
        // person.viewname()
            
        
       
   
    </script>
    <style>
        #xdd {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
   
   
</head>

<body>
    <div id="xdd"></div>
    
   
</body>

<script>

    var xdd=document.getElementById("xdd")
            xdd.onclick=function (){
                let _this=this
                //console.log(this);
                //this.style.backgroundColor="yellow"
                window.setTimeout(function (){
                    _this.style.backgroundColor="yellow"
                },2000)
            }
    </script>
</html>